/* buttons.css
 * source:  http://www.red-team-design.com/cross-browser-css-gradient-buttons
 * Make sweeeet buttons ya'll.
 */
.button {
    border: 1px solid rgba(0, 0, 0, 0.3);

    -webkit-box-shadow: 0 0 0.05em rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 0.05em rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0.05em rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
    display: inline-block;
    font: bold 1.5em 'Trebuchet MS',Arial,Helvetica;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.button,.button span {
    -webkit-border-radius: 0.3em 0.3em 0.3em 0.3em;
    -moz-border-radius: 0.3em 0.3em 0.3em 0.3em;
    border-radius: 0.3em 0.3em 0.3em 0.3em;
}

.button span {
    background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -webkit-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%), -webkit-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%), -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
    background-image: -o-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -o-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -o-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%), -o-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
    background-image: -ms-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -ms-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -ms-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%), -ms-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

    -webkit-background-size: 3px 3px;
    -moz-background-size: 3px 3px;
    background-size: 3px 3px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 0.5em 2.5em;
}

.button-small {
    font: bold 1em 'Trebuchet MS',Arial,Helvetica;
    margin: 2px;
}

.button-small span {
    padding: 0.1em 1em;
}

.button-med {
    font: bold 1.2em 'Trebuchet MS',Arial,Helvetica;
    margin: 4px;
}

.button-med span {
    padding: 0.3em 1.25em;
}

.button:hover,
.button:visited {
    -webkit-box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);
    color: #fff;
}

.button:active {
    position: relative;
    top: 1px;
}

.button-khaki {
    background: -webkit-linear-gradient(-90deg, #BDD1B4, #A2B598) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #BDD1B4, #A2B598) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #BDD1B4, #A2B598) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #BDD1B4, #A2B598) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #BDD1B4, #A2B598) repeat scroll 0 0 transparent;
}

.button-khaki:hover {
    background: -webkit-linear-gradient(-90deg, #A2B598, #BDD1B4) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #A2B598, #BDD1B4) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #A2B598, #BDD1B4) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #A2B598, #BDD1B4) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #A2B598, #BDD1B4) repeat scroll 0 0 transparent;
}

.button-khaki:active {
    background: none repeat scroll 0 0 #A2B598;
}

.button-blue {
    background: -webkit-linear-gradient(-90deg, #81A8CB, #4477A1) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #81A8CB, #4477A1) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #81A8CB, #4477A1) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #81A8CB, #4477A1) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #81A8CB, #4477A1) repeat scroll 0 0 transparent;
}

.button-blue:hover {
    background: -webkit-linear-gradient(-90deg, #4477A1, #81A8CB) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #4477A1, #81A8CB) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #4477A1, #81A8CB) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #4477A1, #81A8CB) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #4477A1, #81A8CB) repeat scroll 0 0 transparent;
}

.button-blue:active {
    background: none repeat scroll 0 0 #4477A1;
}

.button-brown {
    background: -webkit-linear-gradient(-90deg, #BF6F50, #8F3714) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #BF6F50, #8F3714) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #BF6F50, #8F3714) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #BF6F50, #8F3714) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #BF6F50, #8F3714) repeat scroll 0 0 transparent;
}

.button-brown:hover {
    background: -webkit-linear-gradient(-90deg, #8F3714, #BF6F50) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #8F3714, #BF6F50) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #8F3714, #BF6F50) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #8F3714, #BF6F50) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #8F3714, #BF6F50) repeat scroll 0 0 transparent;
}

.button-brown:active {
    background: none repeat scroll 0 0 #8F3714;
}

.button-green {
    background: -webkit-linear-gradient(-90deg, #C8DD95, #428739) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #C8DD95, #428739) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #C8DD95, #428739) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #C8DD95, #428739) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #C8DD95, #428739) repeat scroll 0 0 transparent;
}

.button-green:hover {
    background: -webkit-linear-gradient(-90deg, #428739, #C8DD95) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #428739, #C8DD95) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #428739, #C8DD95) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #428739, #C8DD95) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #428739, #C8DD95) repeat scroll 0 0 transparent;
}

.button-green:active {
    background: none repeat scroll 0 0 #428739;
}

.button-red {
    background: -webkit-linear-gradient(-90deg, #E84B6E, #D82741) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #E84B6E, #D82741) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #E84B6E, #D82741) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #E84B6E, #D82741) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #E84B6E, #D82741) repeat scroll 0 0 transparent;
}

.button-red:hover {
    background: -webkit-linear-gradient(-90deg, #D82741, #E84B6E) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #D82741, #E84B6E) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #D82741, #E84B6E) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #D82741, #E84B6E) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #D82741, #E84B6E) repeat scroll 0 0 transparent;
}

.button-red:active {
    background: none repeat scroll 0 0 #D82741;
}

.button-purple {
    background: -webkit-linear-gradient(-90deg, #B8A9F3, #6F50E7) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #B8A9F3, #6F50E7) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #B8A9F3, #6F50E7) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #B8A9F3, #6F50E7) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #B8A9F3, #6F50E7) repeat scroll 0 0 transparent;
}

.button-purple:hover {
    background: -webkit-linear-gradient(-90deg, #6F50E7, #B8A9F3) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #6F50E7, #B8A9F3) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #6F50E7, #B8A9F3) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #6F50E7, #B8A9F3) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #6F50E7, #B8A9F3) repeat scroll 0 0 transparent;
}

.button-purple:active {
    background: none repeat scroll 0 0 #6F50E7;
}

.button-black {
    background: -webkit-linear-gradient(-90deg, #656565, #141414) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #656565, #141414) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #656565, #141414) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #656565, #141414) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #656565, #141414) repeat scroll 0 0 transparent;
}

.button-black:hover {
    background: -webkit-linear-gradient(-90deg, #141414, #656565) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #141414, #656565) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #141414, #656565) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #141414, #656565) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #141414, #656565) repeat scroll 0 0 transparent;
}

.button-black:active {
    background: none repeat scroll 0 0 #141414;
}

.button-orange {
    background: -webkit-linear-gradient(-90deg, #F8C939, #F09C15) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #F8C939, #F09C15) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #F8C939, #F09C15) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #F8C939, #F09C15) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #F8C939, #F09C15) repeat scroll 0 0 transparent;
}

.button-orange:hover {
    background: -webkit-linear-gradient(-90deg, #F09C15, #F8C939) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #F09C15, #F8C939) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #F09C15, #F8C939) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #F09C15, #F8C939) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #F09C15, #F8C939) repeat scroll 0 0 transparent;
}

.button-orange:active {
    background: none repeat scroll 0 0 #F09C15;
}

.button-silver {
    background: -webkit-linear-gradient(-90deg, #EAEAEA, #C5C5C5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #EAEAEA, #C5C5C5) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #EAEAEA, #C5C5C5) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #EAEAEA, #C5C5C5) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #EAEAEA, #C5C5C5) repeat scroll 0 0 transparent;
}

.button-silver:hover {
    background: -webkit-linear-gradient(-90deg, #C5C5C5, #EAEAEA) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(-90deg, #C5C5C5, #EAEAEA) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(-90deg, #C5C5C5, #EAEAEA) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(-90deg, #C5C5C5, #EAEAEA) repeat scroll 0 0 transparent;
    background: linear-gradient(-90deg, #C5C5C5, #EAEAEA) repeat scroll 0 0 transparent;
}

.button-silver:active {
    background: none repeat scroll 0 0 #C5C5C5;
}
